<template>
  <el-tabs
    v-model="active"
    :type="widget.options.type"
    :tab-position="widget.options.tabPosition"
  >
    <el-tab-pane
      v-for="(tab, index) in widget.tabs"
      :key="`${widget.key}_${index}`"
      :label="tab.label"
      :name="tab.name"
    >
      <template v-for="item in tab.list">
        <template v-if="item.type === 'flexContainer'">
          <generate-form-flex-container
            :key="item.key"
            :widget="item"
            :remote="remote"
            :rules="rules"
          />
        </template>
        <template v-else-if="item.type === 'group'">
          <generate-form-group
            :key="item.key"
            :widget="item"
            :remote="remote"
            :rules="rules"
          />
        </template>
        <template v-else>
          <generate-form-item
            :key="item.key"
            :rules="rules"
            :widget="item"
            :remote="remote"
            :models.sync="dataModel"
          />
        </template>
      </template>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import GenerateFormItem from './GenerateFormItem'
import GenerateFormFlexContainer from './GenerateFormFlexContainer'
import GenerateFormGroup from './GenerateFormGroup'

export default {
  components: {
    GenerateFormItem,
    GenerateFormFlexContainer,
    GenerateFormGroup
  },
  props: ['widget', 'models', 'rules', 'remote'],
  data() {
    return {
      active: null,
      dataModel: this.models,
    }
  },
  methods: {},
  mounted() {
    this.active = this.widget.tabs[0].name
  },
  watch: {
    dataModel: {
      deep: true,
      handler(val) {
        this.models = val
        this.$emit('update:models', {
          ...this.models,
        })
        this.$emit('input-change', val, this.widget.model)
      },
    },
    models: {
      deep: true,
      handler(val) {
        this.dataModel = val
      },
    },
  },
}
</script>

<style lang="scss" scoped></style>
